<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <script src="./js/common.js"></script>
</head>

<body>
    <div class="main pd12">
        <div class="top flex_x between pd12">
            <div class="t_left back">
                <i class="iconfont mr_20">&#xe84f;</i>
                <span class="font_blod">Recommended List</span>
            </div>
            <a href="./search.html">
                <div class="t_right">
                    <img class="mr_20" src="./static/image/Component 22.svg" alt="">
                </div>
            </a>
        </div>
        <div class="r_content flex_x around pd12">
           <a href="./detail.html">
            <div class="r_item pos_r">
                <img src="./static/image/Rectangle 29.png" alt="">
                <span class="pos_a desc">Pop Music in 2023</span>
            </div>
           </a>
            <div class="r_item pos_r">
                <img src="./static/image/Rectangle 30.png" alt="">
                <span class="pos_a desc">Sounds of nature</span>

            </div>
            <div class="r_item pos_r">
                <img src="./static/image/Rectangle 31.png" alt="">
                <span class="pos_a desc">Piano Music</span>

            </div>
            <div class="r_item pos_r">
                <img src="./static/image/Rectangle 35.png" alt="">
                <span class="pos_a desc">Classic Music</span>

            </div>
            <div class="r_item pos_r">
                <img src="./static/image/Rectangle 77.png" alt="">
                <span class="pos_a desc">Tropical House</span>

            </div>
            <div class="r_item pos_r">
                <img src="./static/image/Rectangle 78.png" alt="">
                <span class="pos_a desc">Sleep playlist</span>

            </div>
            <div class="r_item pos_r">
                <img src="./static/image/Rectangle 30 (1).png" alt="">
                <span class="pos_a desc">Trap Rap</span>

            </div>
            <div class="r_item pos_r">
                <img src="./static/image/Rectangle 80.png" alt="">
                <span class="pos_a desc">Healing voice</span>

            </div>
        </div>
        <div class="bott pos_f">
            <img class="pos_a detailss" src="./static/image/imgbin_bubble-transparency-and-translucency-png 8.png" alt="">
            <div class="taggle pos_a">
                <div class="t_top flex_x around">
                    <i class="iconfont mt_10">&#xe78a;</i>
                    <i class="iconfont font_24 pause btns" >&#xe624;</i>
                    <i class="iconfont mt_10">&#xe7a5;</i>
                </div>
                <div class="t_bot font_12 mt_16">Thinking Out Loud</div>
            </div>
        </div>
    </div>
</body>
<style>
    .main {
        box-sizing: border-box;
        background: linear-gradient(#f4f1e9, #fff);
        height: 100vh;
        padding-top: 40px;
    }

    .r_content {
        flex-wrap: wrap;
    }

    .r_item {
        width: 130px;
        height: 130px;
        margin-bottom: 20px;
    }

    .desc {
        display: inline-block;
        width: 110px;
        height: 19px;
        line-height: 19px;
        padding-left: 4px;
        box-sizing: border-box;
        left: 0;
        bottom: 20px;
        background: rgba(217, 217, 217, 0.55);
        font-size: 11px;
    }

    .bott {
        height: 160px;
        width: 100%;
    }

    .bott img {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

    .taggle {
        bottom: 4px;
        left: 40%;
        color: #888;
    }
</style>

</html>